<template>
	<view class="kjfp">
		<!-- 		<view class="pageTitle">
			<text>代开发票查询</text>
		</view> -->
		<nsrBar @nsrGX="nsrGx" :tabActionMr="tabActionMr"></nsrBar>
		<view class="main">
			<view class="item" style="border: 1px solid #0000006b;border-radius: 10rpx;">
				<view class="name">当前纳税人</view>
				<view class="val">{{userInfo.xm}} ({{userInfo.zjhm}})</view>
			</view>
			<view class="title">
				<view class="tm">我的已代开发票</view>
				<view class="search" @click="toggle('bottom')">筛选</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="conSearch">
					<view class="cxTitle">
						<view class="cxMc">筛选条件</view>
						<uni-icons type="closeempty" @click="closeToggle()"></uni-icons>
					</view>
					<view class="xzItem">
						<view class="name">承租方名称</view>
						<view class="con">
							<input type="text" v-model="formData.gfNsrmc" style="width: 100%;" placeholder="请输入名称" />
						</view>
					</view>
					<view class="xzItem">
						<view class="name">房源地址</view>
						<view class="con">
							<input type="text" v-model="formData.address" style="width: 100%;" placeholder="请输入房源地址" />
						</view>
					</view>
				</view>
				<view class="btn">
					<button type="default" plain="true" class="qrbtn" size="mini" @click="handleReset">重置</button>
					<button type="primary" class="qrbtn" size="mini" @click="handleSearch('cxBtn')">确定</button>
				</view>
			</uni-popup>
			<view class="box" v-for="(item,index) in fpxxData" :key="index">
				<view class="item xzk">
					<view class="address">
						<view class="pZhi">普</view>
						<view>{{item.address}}</view>
					</view>
					<view class="ykj">已开具</view>
				</view>
				<view class="item">
					<view class="name">承租人</view>
					<view class="val">{{item.nsrmc}}</view>
				</view>
				<view class="item">
					<view class="name">开票金额</view>
					<view :class="item.sfch=='是'?'val redC':'val'">{{item.je}}</view>
				</view>
				<view class="item">
					<view class="name">发票品目名称</view>
					<view class="val">{{item.hwmc}}</view>
				</view>
				<view class="sqBtn">
					<view class="btnItem" @click="yltpBtn(item)">预览图片</view>
					<view class="btnItem" @click="fpyjfs(item)">交付发票</view>
				</view>
				<!-- <uni-icons class="uniIcons" type="right" size="20" @click="dkfpxqBtn(item)"></uni-icons> -->
			</view>
			<view class="zwsj" v-if="fpxxData.length==0">
				暂无数据
			</view>
		</view>
		<yjfs :showMail="showMail" @closeMail="closeMail" @yjfs="yjfs" :sbId="this.sbId" :tip="'请填写邮箱地址进行发送'"></yjfs>
	</view>
</template>

<script>
	import pickerZdy from "@/components/pickerZdy.vue"
	import nsrBar from "@/components/nsrBar.vue"
	import yjfs from "@/components/yjfs.vue"
	import {
		pageYstDzfp,
		sendYstDzfpEmail
	} from "@/utils/common-api.js"
	import commonTools from "@/utils/common-tools.js";
	export default {
		name: "dkfpcx",
		data() {
			return {
				userInfo: commonTools.getUserInfo() || {},
				nsrlx: "0",
				fpxxData: [],
				showMail: false,
				sbId: "",
				formData: {
					gfNsrmc: "",
					address: "",
					kpStart: "",
					kpEnd: "",
					gdSearchType: "",
				},
				page: {
					total: 0,
					pageIndex: 1,
					pageSize: 10,
				},
				paramsVal:{},
				tabActionMr:"tabItem1"
			};
		},
		components: {
			pickerZdy,
			nsrBar,
			yjfs
		},
		onLoad(e) {
			this.paramsVal = JSON.parse(e.data)
			console.log(this.paramsVal)
			if(this.paramsVal.type=="kjfp"){
				this.nsrlx=this.paramsVal.nsrlx
					if(this.nsrlx==="0"){
						this.tabActionMr = "tabItem1"
					}
					if(this.nsrlx==="1"){
						this.tabActionMr = "tabItem2"
					}
			}
		},
		onShow() {
			this.handleSearch("onShow")
		},
		onReachBottom() {
			this.handleSearchEnd()
		},
		methods: {
			// 纳税人切换
			nsrGx(val) {
				this.nsrlx = val
				this.handleSearch("cxBtn")
			},
			// 触底请求
			handleSearchEnd() {
				if (this.page.pageIndex * this.page.pageSize < this.page.total) {
					this.page.pageIndex = this.page.pageIndex + 1
					this.handleSearch()
				}
			},
			// 查询
			async handleSearch(val) {
				// 重新进入页面、根据筛选条件查询数据重置
				if (val == "cxBtn" || val == "onShow") {
					this.fpxxData = []
					this.page = {
						total: 0,
						pageIndex: 1,
						pageSize: 10,
					}
				}
				let params = {
					nsrlx: this.nsrlx,
					...this.formData,
					...this.page
				}

				let res = await pageYstDzfp(params)
				if (res.head.errorCode == "0") {
					this.fpxxData = this.fpxxData.concat(res.body.data)
					this.page.total = res.body.pager.recordCount
					if (val == "cxBtn" || val == "onShow") {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						})
						this.closeToggle()
					}
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 重置
			handleReset() {
				this.formData = {
					gfNsrmc: "",
					address: "",
					kpStart: "",
					kpEnd: "",
					gdSearchType: "",
				}
				this.handleSearch("cxBtn")
			},
			// 筛选（底部弹出框）
			toggle(type) {
				this.$refs.popup.open(type)
			},
			// 筛选关闭（底部弹出框）
			closeToggle(type) {
				this.$refs.popup.close("bottom")
			},
			// 预览图片
			yltpBtn(val) {
				let params = {
					fpId: val.fpId,
					// fpId: "a76691b29a774cd189c0973de27aee16",
					wjlx: "jpg"
				}
				uni.navigateTo({
					url: "/pages/dzfp/pdfzimg?data=" + JSON.stringify(params)
				})
			},
			// 显示邮件发送
			fpyjfs(val) {
				this.showMail = true
				this.yjfsData = val
				this.sbId = val.sbId
			},
			// 隐藏邮件发送
			closeMail(val) {
				this.showMail = false
			},
			// 获取邮件信息
			async yjfs(val) {
				// console.log(val)
				let params = {
					fpId: this.yjfsData.fpId,
					emailAddressList: val
				}
				let res = await sendYstDzfpEmail(params)
				if (res.head.errorCode == "0") {
					this.closeMail()
					uni.showModal({
						title: '提示',
						content: '邮件发送成功',
						confirmColor: '#000000', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框 
						buttonText: '确定',
						success: function(res) {}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '邮件发送失败，请重新发送',
						confirmColor: '#000000', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框 
						buttonText: '确定',
						success: function(res) {}
					});
				}
			},
			// 代开发票详情
			dkfpxqBtn(val) {
				// let params = {
				// 	sbpzxh: val.sbpzxh,
				// 	sbId: val.sbId,
				// 	nsrlx: this.nsrlx
				// }
				let params = {
					nsrlx: "0",
					sbId: "02cbbe49fbad45a09dc5d7eb1d90b2a2",
					sbpzxh: "edada6a05fc0449d8983bfd283049db3",
					sjXzqhsjDm: "440100",
				}
				uni.navigateTo({
					url: "/pages/dkfpcx/dkfpxq?data=" + JSON.stringify(params)
				})
			},
		}
	}
</script>


<style>
	.main {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		min-height: 100vh;
	}

	.box {
		margin: 30rpx 0;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #0000006b;
	}

	.title {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 0 0;
		align-items: center;
		font-weight: bold;

	}

	.title>.search {
		color: #3d8fff;
		font-size: 26rpx;
	}

	.conSearch {
		background: #ffffff;
		min-height: 30vh;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding: 20rpx;
	}

	.conSearch>.cxTitle {
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.conSearch>.xzItem {
		padding: 20rpx;
		font-size: 26rpx;
	}

	.xzItem>.con {
		padding: 20rpx 0;
		font-size: 30rpx;
		border-bottom: 2rpx solid #0000001a;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item {
		display: flex;
		font-size: 26rpx;
		background-color: #ffffff;
		font-weight: bold;
		padding: 20rpx;
		word-break: break-all;
		align-items: center;
	}

	.xzk {
		font-size: 28rpx;
		word-break: break-all;
		border-bottom: 2rpx solid #0000001a;
		display: flex;
		/* align-items: flex-start; */
		align-items: center;
		justify-content: space-between
	}

	.address {
		display: flex;
		/* align-items: flex-start; */
		align-items: center;
		justify-content: space-between
	}

	.pZhi {
		background: #4285f4;
		color: #ffffff;
		padding: 8rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}

	.ykj {
		padding: 8rpx;
		border: 2rpx solid #14c79c;
		color: #14c79c;
		border-radius: 5rpx;
		width: 100rpx;
	}

	.item>.name {
		text-align: left;
		width: 160rpx;
		margin-right: 20rpx;
		color: #66666699;
	}

	.item>.val {
		text-align: left;

	}

	.btn {
		text-align: center;
		width: 100%;
		padding: 10rpx 0 0 0;
		background-color: #ffffff;

	}



	.btn uni-button {
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0 20rpx;

	}

	.uniIcons {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
	}

	.sqBtn {
		text-align: center;
		width: 100%;
		display: flex;
		background-color: #ffffff;
		justify-content: space-around;
		border-top: 2rpx solid #00000033;
		color: #518ff5;
		margin-top: 10rpx;
	}

	.sqBtn>.btnItem {
		padding: 28rpx;
		width: 50%;
		border-right: 2rpx solid #00000033;
	}
	.redC{
		color: red;
	}
</style>